<template>
  <SchoolListCard v-for="(school) in data" :key="school.code"
    :logo_url="webUrl + 'schoolimgs/schoolIcon/' + school.logo_filename" :cn_name="school.cn_name"
    :features="school.features" :province_name="school.province_name" :city_name="school.city_name"
    :categories="school.categories" :belong="school.belong" :hits="school.hits" :rank="school.ranking"
    :code="school.code" />
</template>

<script lang="ts" setup name="name">
import { useUrlStore } from "@/stores/url";
const { webUrl } = useUrlStore()
// 导入学校卡片
import { onMounted, ref, watch } from 'vue';
import SchoolListCard from './SchoolListCard.vue';
import axios from 'axios';

const { propSelectedProvince, propSelectLableNames, propSearchKey } = defineProps(['propSelectedProvince', 'propSelectLableNames', 'propSearchKey'])

interface School {
  code: string;
  gb_code: string;
  cn_name: string;
  logo_filename: string;
  nature_type: string;
  edu_level: string;
  belong: string;
  categories: string;
  features: string;
  art_features: string;
  province_code: string;
  province_name: string;
  city_name: string;
  hits: string;
  ranking: number;
}

const totalSchool = defineModel('totalSchool', {
  default: 0,
});

const data = ref<School[]>([]);   // 用于存储学校数据
const currentPage = ref(1);  // 当前页数
let isLoading = false; // 防止重复请求

// 获取学校数据
const catchSchoolByQuery = (page: number) => {
  if (isLoading) return; // 防止重复请求
  isLoading = true; // 设置为正在加载

  // 清理 propSelectLableNames，确保不包含“不限”
  const cleanedSelectLableNames = propSelectLableNames.filter((item: string) => item !== "不限");

  axios.post('/index.php/User/getSchoolByQuery', {
    "selectedProvince": propSelectedProvince,
    "selectLableNames": cleanedSelectLableNames,
    "searchKey": propSearchKey,
    "page": page,        // 页码
    "pageSize": 20       // 每页条数
  })
    .then(response => {
      isLoading = false; // 请求完成后恢复状态
      if (response.data.status === successCode) {
        totalSchool.value = response.data.total;
        // 处理返回的学校数据
        if (page === 1) {
          data.value = response.data.data;
        } else {
          data.value.push(...response.data.data);  // 追加新数据
        }
        // 更新当前页
        currentPage.value = page;
      } else {
        console.log(response.data.message);
      }
    })
    .catch(error => {
      isLoading = false;
      console.log(error);  // 捕获错误
    });
};

// 监听 propSelectedProvince, propSelectLableNames 和 propSearchKey 的变化
let debounceTimeout: number | undefined;

// 防抖函数
const debounce = (func: () => void, delay: number) => {
  clearTimeout(debounceTimeout);
  debounceTimeout = setTimeout(func, delay);
};

watch(
  [() => propSelectedProvince, () => propSelectLableNames, () => propSearchKey],
  () => {
    debounce(() => {
      console.log("selectedItems updated:", propSelectedProvince);
      catchSchoolByQuery(1); // 重新加载第一页数据
    }, 100);
  },
  { deep: true }
);

// 添加滚动监听事件
const onScroll = () => {
  // 获取滚动条位置和页面高度
  const scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
  const windowHeight = window.innerHeight;
  const documentHeight = document.documentElement.scrollHeight;

  // 判断是否滚动到页面底部
  if (scrollPosition + windowHeight >= documentHeight - 50 && !isLoading) {
    // 当距离底部 50px 内且未加载时，加载下一页
    catchSchoolByQuery(currentPage.value + 1);
  }
};

// 监听滚动事件
window.addEventListener('scroll', onScroll);

// 初始化时，加载第一页数据
onMounted(() => {
  catchSchoolByQuery(1);
});

const successCode = 'success';
</script>

<style>
/* 样式可以根据需要添加 */
</style>
